<template>
	<view class="shop-car">
		<view class="trolley">
			<view class="title">
				<text>购物车({{cartlist.length}})</text>
				<text @click="state" v-if="cartlist.length">{{code==2?'编辑':'取消'}}</text>
			</view>
			<view class="goodsInfo" v-for="(item,index) in cartlist" :key="index">
				<view class="goodsInfo_top">
					<image :src="item.checked?'../../static/select.png':'../../static/not_select.png'"
						class="checked-image" mode="" @tap="goodsCheck(index)"></image>
					<view class="goodsInfo-right">
						<image :src="item.activity_list.pic" class="goods-image" mode="" style="border-radius: 12upx;"
							@click="goShop(item)">
						</image>
						<view class="goodsInfo-box" @click="edit(item)">
							<view class="goods-name">{{item.activity_list.title}}</view>
							<!-- 		<view class="spe" v-if="item.state!=1">
								<text>该商品无法购买</text>
							</view> -->
							<view class="goods-box">
								<text
									class="goods-price">¥{{item.activity_list.price}}<text>/{{item.activity_list.day}}天</text></text>
								<view class="goods-num-box">
									<!-- 	<view class="goods-image" @tap="sub(index)">
										<text>-</text>
									</view> -->
									<view class="goods-num">
										X<text>{{item.activity_list.num}}</text>
									</view>
									<!-- 	<view class="goods-image" @tap="add(index)">
										<text>+</text>
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<block v-if="item.props_list.num||item.rent_list.num">
					<view class="prop_list" v-if="item.props_list.num" @click="edit(item)">
						<u-icon name="arrow-right"></u-icon>
						<view class="" style="min-width: 160upx;">
							<text>￥{{item.props_list.price}}</text> <text class="statistics_num">
								<text>X</text>{{item.props_list.num}}</text>
						</view>
						<view style="display: flex;">道具购买 | <view
								style="width: 140upx;margin-left: 10upx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
								{{item.props_list.title}}</view>
						</view>
					</view>
					<view class="prop_list" v-if="item.rent_list.num" @click="edit(item)">
						<u-icon name="arrow-right"></u-icon>
						<view class="">
							<text>￥{{item.rent_list.price_s}}/天</text>(押金：{{item.rent_list.price}}) <text
								class="statistics_num"> <text>X</text>{{item.rent_list.num}}</text>
						</view>
						<view style="">道具租赁 | {{item.rent_list.title}}</view>
					</view>
				</block>


				<view class="prop_" @click="edit(item)" v-else-if="!item.props_list.length&&item.activity_list.props_count">
					您还没有选择专属道具，去添加 >
				</view>

			</view>


			<u-empty v-if="!cartlist.length" marginTop="200rpx" mode="car"
				icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>

		<view class="operate" v-if="cartlist.length">
			<view class="allSelect" @click="checkboxChange">
				<image :src="checked?'/static/select.png':'/static/not_select.png'" mode=""></image><text>全选</text>
				<view class="" v-if="code==2">
					￥{{sum}}
				</view>
			</view>


			<view class="btn">
				<block v-if="code==2">
					<text class="" @click="trolleyScheme">
						生成方案
					</text>
					<text class="" style="margin-left: 10upx;" @click="nav">
						去结算
					</text>
				</block>

				<text class="" v-else @click="deleteCart">
					删除
				</text>
				<!-- （{{cartlist.length}}） -->
			</view>

		</view>


		<u-popup :show="show" :round="24" @close="close">
				<view class="popup_">
					<view class="goods">
						<image :src="goodsData.pic" mode=""></image>
						<view class="text">
							<view class="">
								{{goodsData.title}}
							</view>
							<view class="">
								￥{{goodsData.price_a?(userData.member_zt==2?(goodsData.price_s?goodsData.price_s:'0'):goodsData.price_a):'0'}}
							</view>
						</view>
					</view>
					<scroll-view scroll-y="true" style="height: 50vh;margin-top: 10upx;">
						<view class="title">
							购买挑战
						</view>
						<view class="option">
							<view class="text text_">
								{{goodsData.title}}
							</view>
						</view>

						<block v-if="goodsData.props">
							<u-line margin="20rpx 0"></u-line>
							<view class="" style="display: flex;">
								<view class="title">
									购买道具
								</view>
								<view class=""
									style="color: #825d2e;display: flex;font-size: 24upx;align-items: center;"
									@click="navProp">
									道具说明 >
								</view>
							</view>

							<view class="option" style="flex-direction: column;">
								<!-- 	<view class="" style="margin-bottom: 40upx;">
									<text :class="usage==1?'text text_':'text'"
										@click="usage=1">{{goodsData.props.title}}(租赁)
										<text>￥{{goodsData.props.price_s}}</text></text>
								</view> -->
								<view class="" style="margin-bottom: 40upx;">
									<text :class="usage==2?'text text_':'text'"
										@click="setUsage">{{goodsData.props.title}}
										<text>￥{{goodsData.props.price}}</text></text>
								</view>
							</view>

							<view style="display: flex;align-items: center;">
								<view class="title">
									数量 <text>（套）</text>
								</view>
								<view class="num">
									<view class="reduce" @click="reducePropsNum">
										-
									</view>
									<text>{{propsNum}}</text>
									<view class="add" @click="addPropsNum">
										+
									</view>
								</view>
							</view>
							<view class="hint">
				<!-- 				<view class="">
									温馨提示：
								</view> -->
								<text class="">
									{{goodsData.cart_desc}}
								</text>
							</view>
						</block>

					</scroll-view>
					<view class="addShopping" @click="editShopping">
						确定修改
					</view>

				</view>
			</u-popup>
 


		<!-- 综合道具 -->
		<view class="card" v-if="cartlist.length">
			<view class="" style="font-size: 28upx;font-weight: 700;color: #333333;">
				90%会购买的搭配
			</view>
			<scroll-view scroll-x="true">
				<view class="synthetical_prop_list">
					<view class="synthetical_prop_item" v-for="(item ,index) in syntheticalList" :key="index">
						<image :src="item.pic" mode="" @click="magnify(item.pic)"></image>
						<view class="title">
							{{item.title}}
						</view>
						<view class="money">
							￥{{item.price}}
						</view>
						<u-number-box v-model="item.value" min="0" @change="setSyntheticalNum">
							<view slot="minus" class="minus">
								<u-icon name="minus" size="12" color="#AC7D3D"></u-icon>
							</view>
							<text slot="input" style="width: 40rpx;text-align: center;"
								class="input">{{item.value}}</text>
							<view slot="plus" class="plus">
								<u-icon name="plus" color="#AC7D3D" size="12"></u-icon>
							</view>
						</u-number-box>
					</view>
				</view>
			</scroll-view>
		</view>

		<u-popup :show="imgUrl" @close="magnifyClose" mode="center">
			<image :src="imgUrl" mode="widthFix" style="width: 90vw;"></image>
		</u-popup>
		<view class="live" v-if="loveGoodsList.length">
			<view class="live_title">
				<view class="left_line">
				</view>
				<view class="text">
					<u-icon name="heart-fill" color="#FF3636" size="28" style="margin-right: 6upx;"></u-icon>你可能还喜欢
				</view>
				<view class="right_line">
				</view>
			</view>

			<goodsVideoList :scrollHeight="`calc(100vh - 56rpx)`" :goodsList="loveGoodsList" />
		</view>


		<u-popup :show="payShow" @close="payShow=false" mode="center" :safeAreaInsetBottom="false" closeable
			round="12rpx">
			<view style="padding: 0 50upx;width: calc(100vw - 200upx);">
				<view class=""
					style="font-size: 32upx;color: #333333;text-align: center;font-weight: 700;margin-top: 90upx;">
					当前免费生成次数已用完<br />
					如需继续生成需购买次数！
				</view>
				<view class=""
					style="font-size: 36upx;color: #333333;text-align: center;font-weight: 700;margin: 30upx auto;">
					是否购买次数？
				</view>
				<view class="" style="display: flex;justify-content: space-between;margin-bottom: 30upx;">
					<view class="anew_btn" @click="pay">
						YES
					</view>
					<view class="anew_btn" @click="esc">
						NO
					</view>
				</view>
			</view>
		</u-popup>
		
		
			<!-- <tqb-tabbar activeIndex="3" /> -->
	</view>
</template>

<script>
	import commonCar from '@/components/shopCar/shopCar.vue'
	export default {
		data() {
			return {
				goodsList: [{
					img: 'https://img1.baidu.com/it/u=3384796346,381674655&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
					title: '华为荣耀',
					remark: '256G',
					price: '128.80',
					number: 1,
					checked: false
				}, {
					img: 'https://img1.baidu.com/it/u=3384796346,381674655&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
					title: 'mate40',
					remark: '128G',
					price: '116.80',
					number: 1,
					checked: false
				}],
				cartlist: [],
				show: false,
				payShow: false,
				checked: false,
				data: [],
				syntheticalList: [],
				loveGoodsList: [],
				code: 2, //1编辑或2购买
				sum: 0,
				value: 0,
				imgUrl: '',
				goodsData: {},
				goodsNum: 1,
				propsNum: 0,
				editShoppingId: '',
				usage: 1, //1租赁 2购买 
				userData: {},
			}
		},
		components: {
			commonCar
		},
		onLoad(e) {
			if(e.activ_id){
				
				this.$myRuquest('home/user/cart_save',{activ_id:e.activ_id,rent_id:e.rent_id,rent_num:1,activ_num:1}).then(res=>{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				})
				
			}
			console.log('购物车??',e)
		},
		onShow() {
			if(this.$ws) this.$ws.completeClose()
			uni.removeStorageSync('gameId');
			this.cartlist=[]
			this.upData()
			this.checked = false
			this.code=2
			this.userData = uni.getStorageSync("userData")
		},
		methods: {
			upData() {
				this.$myRuquest('home/user/cart_list').then(res => {
					this.cartlist = res.data
					let activ_id = []
					this.cartlist.forEach(item => {
						activ_id.push(item.activity_list.id)
					})
					this.checked=false
					this.calculate()
					this.$myRuquest('home/index/activ_love', {
						activ_id: activ_id.join(','),
						num: 10
					}).then(res => {
						this.loveGoodsList = res.data.activ_list
					})
				})

				this.$myRuquest('home/index/props_list').then(res => {
					res.data.forEach(item => item.value = 0)
					this.syntheticalList = res.data
				})
			},

			esc() {
				this.payShow = false
			},

			pay() {
				this.$myRuquest('home/user/custom_pay').then(res => {
					this.payMoney(res.data)
				})

			},
			payMoney(data) {
				let that = this
				uni.requestPayment({
					provider: 'wxpay',
					nonceStr: data.nonceStr,
					package: data.package,
					paySign: data.paySign,
					signType: data.signType,
					timeStamp: data.timeStamp,
					success: function(res) {
						that.payShow = false
						that.trolleyScheme()
					},
					fail: function(err) {
						that.$refs.uToast.show({
							type: 'error ',
							message: '支付失败'
						})
					}
				})
			},
			edit(item) {
				let activ_id = item.activity_list.id
				this.editShoppingId = item.id
				this.$myRuquest('home/index/activity_det', {
					activ_id
				}).then(res => {
					this.goodsData = res.data.list
					this.goodsNum=item.activity_list.num
					this.propsNum=item.props_list.num||0
					console.log(item)
					this.usage = item.props_list.num ? 2 : ''
					this.show = true
				})

			},
			navProp() {
				if (!this.goodsData.props) return;
				uni.navigateTo({
					url: '/pages/goodsDetails/propExplain?data=' + encodeURIComponent(JSON.stringify(this.goodsData.props))
				})
			},
			setUsage() {

				this.usage = this.usage == 2 ? '' : 2
				this.propsNum = this.usage == 2 ? 1 : 0

			},
			close() {
				this.show = false
			},
			addGoodsNum() {
				this.goodsNum++
			},
			reduceGoodsNum() {
				if (this.goodsNum - 1 > 0) this.goodsNum--
			},
			addPropsNum() {
				this.usage = 2
				this.propsNum++
			},
			reducePropsNum() {
				if (this.propsNum > 0)  this.propsNum--
				if(this.propsNum ==0) this.usage = ''
			},
			editShopping() {
				let data = {
					cart_id: this.editShoppingId,
					activ_id: this.goodsData.id,
					activ_num: this.goodsNum

				}
				if (this.usage == 2 && this.goodsData.props) {
					data.props_id = this.goodsData.props.id
					data.props_num = this.propsNum
				} else if (this.usage == 1 && this.goodsData.props) {
					data.rent_id = this.goodsData.props.id
					data.rent_num = this.propsNum
				}
				this.$myRuquest('home/user/cart_save', data).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					this.upData()
					
					this.show = false
				})
			},
			magnify(imgUrl) {
				this.imgUrl = imgUrl
			},
			magnifyClose() {
				this.imgUrl = ''
			},
			state() {
				this.code = this.code == 2 ? 1 : 2
			},
			goodsCheck(index) {
				this.cartlist[index].checked = this.cartlist[index].checked ? false : true
				this.checked = this.cartlist.every(item => item.checked)
				this.calculate()
			},
			checkboxChange(e) {
				this.checked = !this.checked
				this.cartlist.forEach(item => {
					item.checked = this.checked
				})
				this.calculate()
			},
			calculate() {
				let sum = 0
				this.cartlist.forEach(item => {
					if (item.checked) {
						sum += item.activity_list.num * item.activity_list.price
						if (item.props_list.num) sum += item.props_list.num * item.props_list.price
						if (item.rent_list.num) sum += item.rent_list.num * item.rent_list.price_s + item.rent_list
							.price
					}
				})
				this.syntheticalList.forEach(item => {
					sum += item.price * item.value

				})
				console.log('价格', sum)
				this.sum = sum.toFixed(2)
				this.$forceUpdate()

			},
			setSyntheticalNum(e) {
				setTimeout(() => {
					this.calculate()
				}, 10)
			},
			deleteCart() {
				let data = []
				let that = this
				this.cartlist.forEach(item => {
					if (item.checked) {
						data.push(item.id)
					}
				})
				uni.showModal({
					title: '提示',
					content: '您确定要删除该商品吗？',
					success: function(res) {
						if (res.confirm) {
							that.$myRuquest('home/user/cart_del', {
								cart_id: data.join(',')
							}).then(res => {
								that.upData()
							})
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// sub(index) {
			// 	this.cartlist[index].number -= 1
			// },
			// add(index) {
			// 	this.cartlist[index].number += 1
			// },
			close() {
				this.show = false
			},
			goShop(item) {
				uni.navigateTo({
					url: `/pages/goodsDetails/goodsDetails?id=${item.activity_list.id}`
				})
			},
			nav() {
				let data = this.cartlist.filter(item => item.checked)
				if (!data.length) return uni.showToast({
					title: '请选择游戏',
					icon: 'none'
				});
				let from = {
					cart_id: [],
					props_id: [],
					props_num: [],
					rent_id: [],
					rent_num: []
				}
				data.forEach(item => {
					from.cart_id.push(item.id)
					// if (item.props_list.id) {
					// 	from.props_id.push(item.props_list.id)
					// 	from.props_num.push(item.props_list.num)
					// }
					// if (item.rent_list.id) {
					// 	from.rent_id.push(item.rent_list.id)
					// 	from.rent_num.push(item.rent_list.num)
					// }

				})
				this.syntheticalList.forEach(item => {
					if (item.value != 0) {
						from.props_id.push(item.id)
						from.props_num.push(item.value)
					}
				})
				for (let key in from) {
					from[key] = from[key].join(',')
				}
				console.log(from)
				this.$myRuquest('home/user/order_add', from).then(res => {
					uni.navigateTo({
						url: `/pages/createOrder/createOrder?data=${JSON.stringify(res.data)}`
					})
				})

			},
			trolleyScheme() {
				let data = this.cartlist.filter(item => item.checked)
				if (!data.length) return uni.showToast({
					title: '请选择游戏',
					icon: 'none'
				});
				let idArr = []
				data.forEach(item => {
					idArr.push(item.id)
				})
				this.$myRuquest('home/custom/cart_custom', {
					cart_id: idArr.join(',')
				}, 'POST').then(res => {
					console.log(res)
					// return;
					if (res.data.code == 400) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.payShow = true
					} else {
						uni.navigateTo({
							url: './trolleyScheme?id=' + res.data.custom_id
						})
					}

				})

			},
			delect(e) {

			},
			goGoods() {

			},
			accounts(e) {

			},
			valChange(e) {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: rgba(0, 0, 0, 0);
	}


	.minus {
		width: 44upx;
		height: 44upx;
		border-width: 2upx;
		background-color: #FED194;
		border-top-left-radius: 160upx;
		border-top-right-radius: 160upx;
		border-bottom-left-radius: 160upx;
		border-bottom-right-radius: 160upx;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 44upx;
		height: 44upx;
		background-color: #FED194;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.operate {
		display: flex;
		position: fixed;
		bottom: 100rpx;
		left: 20rpx;
		right: 20rpx;
		z-index: 1999;
		border-radius: 60rpx;
		background: linear-gradient(to right, #ffffff, #fff9ed);
		padding: 40upx;
		align-items: center;
		transform-origin: 500rpx 0;
		animation: an 1s;
		box-shadow: 0px 0px 16rpx 4rpx rgba(0, 0, 0, 0.1);
		// &:before{
		// 	  content: "";
		// 	  font-size: 24rpx;
		// 	  position: absolute;
		// 	  bottom: -37rpx;
		// 	  right: 200upx;
		// 	  text-align: center;
		// 	  width: 0;
		// 	  height: 0;
		// 	  border-bottom: 20rpx solid transparent;
		// 	  border-top: 20rpx solid #ffffff;
		// 	  border-left: 16rpx solid transparent;
		// 	  border-right: 16rpx solid transparent;
		// }

		>view {
			flex: 3;
		}

		.allSelect {
			font-size: 32upx;
			color: #333333;
			display: flex;

			image {
				width: 36upx;
				height: 36upx;
				margin-right: 10upx;
				position: relative;
				top: 5upx;
			}

			view {
				color: #FF0000;
			}
		}

		.btn {
			text-align: right;
			flex: 4;

			text {
				background-color: #FED194;
				color: #AC7D3D;
				padding: 10upx 25upx;
				border-radius: 30upx;
			}
		}
	}
  @keyframes an {
		0%{
			transform:translateY(160rpx) scale(0);
		}
		100%{
			transform:translateY(0rpx) scale(1);
		}
		
	}
	.shop-car {
		width: 750rpx;
		min-height: 100vh;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		background: #F5F5F5;
	}

	.title {
		font-size: 28upx;
		color: $theme-color;

		image {
			width: 40upx;
			height: 40upx;
			margin-right: 12upx;
		}
	}

	.card {
		background-color: #FFFFFF;
		padding: 20upx;
		margin: 20upx;
		border-radius: 12upx;

		.synthetical_prop_list {
			display: flex;
			align-items: center;

			.synthetical_prop_item {
				margin-right: 20upx;

				image {
					width: 176upx;
					height: 176upx;
				}

				.title {
					font-size: 24upx;
					color: #333333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

				}

				.money {
					margin: 5upx 0;
					font-size: 28upx;
					font-weight: 700;
					color: #FF0000;
					text-align: center;
				}
			}
		}

	}

	.live {
		background-color: #FAFAFA;
		padding: 0 30upx;
		margin-top: 60upx;
		.live_title {
			display: flex;
			align-items: center;
			padding: 0 120upx;

			.left_line {
				flex: 1;
				height: 4upx;
				background-image: linear-gradient(to right, #FAFAFA, #FF3636);
			}

			.text {
				display: flex;
				font-size: 28upx;
				color: #333333;
				padding: 0 14upx;
				height: 56upx;
				line-height: 56upx;
				font-weight: 700;
			}

			.right_line {
				flex: 1;
				height: 4upx;
				background-image: linear-gradient(to left, #FAFAFA, #FF3636);
			}
		}
	}

	.trolley {
		// min-height: 70vh;

		.title {
			display: flex;
			justify-content: space-between;
			color: #333333;
			padding: 20upx;

			text {
				font-size: 36upx;
				font-weight: 700;
			}

			text:nth-child(2) {
				font-size: 32upx;
			}
		}

		.goodsInfo {
			background-color: #FFFFFF;
			padding: 20upx;
			margin: 20upx;
			margin-top: 0;
			border-radius: 12upx;

			// border-bottom: 2rpx solid #EDEDED;
			.goodsInfo_top {
				display: flex;
				flex-direction: row;
				align-items: center;

				&:nth-last-child(1) {
					border: none;
				}



				.checked-image {
					width: 36rpx;
					height: 36rpx;
					padding: 40upx 0;
					margin-right: 20upx;
				}

				.goodsInfo-right {

					display: flex;
					flex-direction: row;
					// align-items: center;
					flex: 1;

					.goods-image {
						width: 160upx;
						height: 160upx;
					}

					.goodsInfo-box {
						// width: 428rpx;
						margin-left: 30rpx;
						display: flex;
						flex-direction: column;
						// align-items: center;
						flex: 1;
						justify-content: space-between;

						.goods-name {
							// width: 428rpx;
							font-size: 28rpx;
							font-weight: 700;
							color: #313133;
						}

						.spe {

							// width: 428rpx;
							text {
								background-color: #F6F6F6;
								color: #999999;
								padding: 10upx 20upx;
								font-size: 24rpx;
								border-radius: 25upx;
							}
						}

						.goods-box {
							// width: 428rpx;
							// margin-top: 18rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;

							.goods-price {
								font-size: 28rpx;
								font-weight: 700;
								color: #333333;

								text {
									font-size: 24upx;
									font-weight: 100;
									color: #999999;
								}
							}

							.goods-num-box {
								// width: 168rpx;
								// height: 46rpx;
								display: flex;
								// flex-direction: row;
								// align-items: center;

								.goods-image {
									width: 36upx;
									height: 36upx;
									background-color: #FED194;
									color: #AC7D3D;
									border-radius: 50%;
									text-align: center;
									line-height: 36upx;
									// border: 1rpx solid #CFCFCF;
									font-weight: 700;
									font-size: 38rpx;
								}

								.goods-num {
									padding: 0 16upx;
									height: 36upx;
									text-align: center;
									line-height: 36upx;
									font-size: 26upx;
									font-weight: 700;
									color: #333333;

									text {
										font-size: 36rpx;
									}
								}
							}
						}
					}
				}

			}

			.prop_ {
				color: #AC7D3D;
				text-align: right;
				font-size: 24upx;
				margin-top: 20upx;
			}
		}

	}

	.popup_ {
		padding: 44upx 40upx;
		padding-bottom: 0;
		align-items: center;

		.goods {
			display: flex;

			image {
				width: 190upx;
				height: 190upx;
				border-radius: 8upx;
				margin-right: 20upx;
			}

			.text {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 32upx;
				color: #333333;

				view:nth-child(1) {

					display: -webkit-box;
					/*设置为弹性盒子*/
					-webkit-line-clamp: 2;
					/*最多显示3行*/
					overflow: hidden;
					/*超出隐藏*/
					text-overflow: ellipsis;
					/*超出显示为省略号*/
					-webkit-box-orient: vertical;
					word-break: break-all;
				}

				view:nth-child(2) {
					font-size: 40upx;
					font-weight: 700;
				}
			}

		}

		.title {
			font-size: 32upx;
			color: #333333;
			font-weight: 700;
			margin: 20upx 0;
			flex: 1;

			text {
				font-size: 28upx;
				color: #999999;
				font-weight: 100;
			}

		}

		.option {
			display: flex;
			flex-wrap: wrap;
			// margin-bottom: 20upx;

			.text {
				// height: 44upx;
				padding: 10upx 20upx;
				border-radius: 44upx;
				// line-height: 44upx;-
				margin-right: 20upx;
				background-color: #ebebeb;

				color: #999999;
				font-size: 24upx;
				margin-bottom: 20upx;

				text {
					margin-left: 160upx;
				}
			}

			.text_ {
				background-color: #FEF2E2;

				color: #AC7D3D;
			}
		}

		.hint {
			display: flex;
			font-size: 28upx;
			color: #999999;

			view:nth-child(1) {
				width: 140upx;
			}

			view:nth-child(2) {
				flex: 1;
			}
		}

		.addShopping {
			width: 360upx;
			background-color: #FED194;
			color: #AC7D3D;
			height: 80upx;
			border-radius: 80upx;
			line-height: 80upx;
			margin: 50upx auto 100upx auto;
			font-size: 36upx;
			text-align: center;
			font-weight: 100;
		}
	}

	.num {
		display: flex;

		.add,
		.reduce {
			width: 40upx;
			height: 40upx;
			line-height: 40upx;
			text-align: center;
			border-radius: 50%;
			background-color: #FED194;
			color: #AC7D3D;

		}

		text {
			margin: 0 15upx;
		}

		.add {}

		.reduce {}
	}

	.prop_list {
		// padding-left: 160upx;
		font-size: 26upx;
		color: #333333;
		display: flex;
		flex-direction: row-reverse;
		margin-top: 20upx;

		>view {
			// flex: 1;
			margin: 0 20upx;
			min-width: 200upx;
			word-wrap: break-word;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

			.statistics_num {
				margin-left: 20upx;

				text {
					font-size: 20upx;
				}
			}
		}

		>view:nth-child(2) {
			display: flex;
			justify-content: space-between;
			margin-left: 10upx;
		}
	}

	.anew_btn {
		width: 234upx;
		height: 68upx;
		line-height: 68upx;
		border-radius: 34upx;
		text-align: center;
		background-color: #FED194;
		color: #AC7D3D;
		font-size: 28upx;
	}
</style>
